<button class="telegram">
  <svg
    style="fill:#FFFFFF;"
    class="telegram-svg"
    viewBox="0,0,256,256"
    y="0px"
    x="0px"
    xmlns="http://www.w3.org/2000/svg"
  >
    <g
      style="mix-blend-mode: normal"
      text-anchor="none"
      font-size="none"
      font-weight="none"
      font-family="none"
      stroke-dashoffset="0"
      stroke-dasharray=""
      stroke-miterlimit="10"
      stroke-linejoin="miter"
      stroke-linecap="butt"
      stroke-width="1"
      stroke="none"
      fill-rule="nonzero"
      fill="#ffffff"
    >
      <g transform="scale(5.12,5.12)">
        <path
          d="M46.137,6.552c-0.75,-0.636 -1.928,-0.727 -3.146,-0.238h-0.002c-1.281,0.514 -36.261,15.518 -37.685,16.131c-0.259,0.09 -2.521,0.934 -2.288,2.814c0.208,1.695 2.026,2.397 2.248,2.478l8.893,3.045c0.59,1.964 2.765,9.21 3.246,10.758c0.3,0.965 0.789,2.233 1.646,2.494c0.752,0.29 1.5,0.025 1.984,-0.355l5.437,-5.043l8.777,6.845l0.209,0.125c0.596,0.264 1.167,0.396 1.712,0.396c0.421,0 0.825,-0.079 1.211,-0.237c1.315,-0.54 1.841,-1.793 1.896,-1.935l6.556,-34.077c0.4,-1.82 -0.156,-2.746 -0.694,-3.201zM22,32l-3,8l-3,-10l23,-17z"
        ></path>
      </g>
    </g>
  </svg>
  <span class="telegram-text">Telegram</span>
</button>

<style>
/* From Uiverse.io by faxriddin20  - Tags: neumorphism, minimalist, smooth, hover effect */
.telegram {
  transition: none 0.5s ease;
  display: flex;
  align-items: center;
  position: relative;
  padding-left: 10px;
  padding-right: 10px;
  width: 130px;
  height: 50px;
  gap: 10px;
  border: none;
  background-color: rgb(42 171 238);
  color: white;
  border-radius: 15px;
  cursor: pointer;
}

.telegram-text {
  transition: none 0.3s ease;
  font-weight: bold;
  font-size: 1rem;
}

.telegram:hover .telegram-text {
  display: none;
  position: absolute;
}

.telegram-svg {
  width: 23px;
  height: 23px;
  transition: 0.8s;
}

.telegram:hover .telegram-svg {
  margin-left: 40px;
  display: block;
  transform: rotate(50deg);
}

</style>
    